<template>
  <div>
    <div id="content">
      <h3>发表评论</h3>
      <textarea name id cols="5" rows="5" maxlength="120" placeholder="请输入你要评论的内容(最多120个字)"></textarea>
      <mt-button type="primary" size="large">发表评论</mt-button>
      <div class="cm_list">
        <ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg" />
              <div class="mui-media-body">
                <p class="username">用户：CBD</p>
                <div class="ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</div>
                <p>发表时间:{{new Date() | dataFormat}}</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right" href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg" />
              <div class="mui-media-body">
                <p class="username">用户：CBD远眺</p>
                <div class="ellipsis">静静的看这个世界，最后终于疯了</div>
                <p>发表时间:{{new Date() | dataFormat}}</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg" />
              <div class="mui-media-body">
                <p class="username">用户：CBD幸福</p>
                <div class="ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</div>
                <p>发表时间:{{new Date() | dataFormat}}</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg" />
              <div class="mui-media-body">
                <p class="username">用户：CBD幸福</p>
                <div class="ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</div>
                <p>发表时间:{{new Date() | dataFormat}}</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg" />
              <div class="mui-media-body">
                <p class="username">用户：CBD幸福</p>
                <div class="ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</div>
                <p>发表时间:{{new Date() | dataFormat}}</p>
              </div>
            </a>
          </li>
          
        </ul>
      </div>
    </div>
    <div id="load"><mt-button type="danger" size="large" plain>加载更多</mt-button></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},

  watch: {}
};
</script>
<style lang='' scoped>
a {
  text-decoration: none;
}

li:active {
  background-color: silver;
}
ul,
li {
  width: 100%;
}
.ellipsis {
  width: 100%;
  height: 50px;
  white-space: normal;
  font-size: 14px;
  margin-top: 3px;
}
.username {
  color: #0062cc;
}
.cm_list{
    margin-top: 20px;
    margin-bottom: 20px
}
#load{
    height: 100px;
}
</style>